<template>
    <div class="studentScore" style="width: 100%">
        <el-row>

            <el-col :span="9">

                <el-form class="addForm"
                         :ref="addForm"
                         :model="studentScore" :rules="rules">

                    <el-form-item prop="name" class="formItem">
                        <el-input v-model.trim="studentScore.name">
                            <template slot="prepend">姓名:</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="code" class="formItem">
                        <el-input v-model.trim="studentScore.code">
                            <template slot="prepend">学号:</template>
                        </el-input>
                    </el-form-item>

                    <el-form-item prop="onlineScore" class="formItem">
                        <el-input type="number" size="medium" v-model="studentScore.onlineScore">
                            <template slot="prepend">在线分数：</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="classScore" class="formItem">
                        <el-input type="number" v-model="studentScore.classScore">
                            <template slot="prepend">课堂分数：</template>
                        </el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" icon="el-icon-edit"
                                   @click="add">提交表单
                        </el-button>
                        <el-button type="warning" icon="el-icon-remove"
                                   @click="()=>$refs[addForm].resetFields()">重置
                        </el-button>
                    </el-form-item>
                </el-form>
                <el-form class="dealForm"
                         :ref="dealForm"
                         :model="dealBill">

                    <el-form-item prop="supplierName" class="formItem">
                        <el-input v-model.trim="dealBill.supplierName">
                            <template slot="prepend">提供分数者:</template>
                        </el-input>
                    </el-form-item>

                    <el-form-item prop="consumerName" class="formItem">
                        <el-input v-model.trim="dealBill.consumerName">
                            <template slot="prepend">获得分数者:</template>
                        </el-input>
                    </el-form-item>

                    <el-form-item prop="dealScore" class="formItem">
                        <el-input type="number" size="medium" v-model="dealBill.dealScore">
                            <template slot="prepend">交易分数（匀分）：</template>
                        </el-input>
                    </el-form-item>


                    <el-form-item>
                        <el-button type="primary" icon="el-icon-edit"
                                   @click="deal">交易
                        </el-button>
                        <el-button type="warning" icon="el-icon-remove"
                                   @click="()=>$refs[dealForm].resetFields()">重置
                        </el-button>
                    </el-form-item>
                </el-form>

            </el-col>
            <el-col :span="15" style="padding-top: 10px">

                <el-form label-width="200"
                         ref="searchForm" :model="searchForm">
                    <el-row>
                        <el-col span="6">
                            <el-form-item prop="queryCondition.similarName">
                                <el-input v-model.trim="searchForm.queryCondition.similarName">
                                    <template slot="prepend"><span>姓名</span></template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col span="6">
                            <el-form-item prop="queryCondition.code">
                                <el-input v-model="searchForm.queryCondition.code">
                                    <template slot="prepend"><span>学号</span></template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col span="6">

                            <el-form-item prop="minOnline">
                                <el-input v-model="searchForm.queryCondition.minOnline">
                                    <template slot="prepend">在线考试分数从</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col span="6">
                            <el-form-item prop="maxMemberBalance">
                                <el-input v-model="searchForm.queryCondition.maxOnline">
                                    <template slot="prepend"> 至</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>


                    <el-form-item>
                        <el-button type="primary" icon="el-icon-edit"
                                   @click="queryStudentScoresButton()">查询
                        </el-button>
                        <el-button type="warning" icon="el-icon-remove"
                                   @click="()=>$refs['searchForm'].resetFields()">重置
                        </el-button>
                    </el-form-item>
                </el-form>

                <el-table class="browserTable" :data="studentScores" :stripe="true">
                    <el-table-column prop="scoreId" label="流水号"></el-table-column>
                    <el-table-column prop="name" label="姓名"></el-table-column>
                    <el-table-column prop="code" label="学号"></el-table-column>
                    <el-table-column prop="onlineScore" label="在线考试分"></el-table-column>
                    <el-table-column prop="classScore" label="课堂考试分"></el-table-column>
                    <!--                    <el-table-column prop="male" label="性别" :formatter="tableMaleColumn"></el-table-column>-->
                    <el-table-column label="操作" width="200" fixed="left">
                        <template slot-scope="props">
                            <el-button-group>
                                <!--                                <el-button type="primary" icon="el-icon-edit"-->
                                <!--                                           @click="update(props.row.studentScoreId)">编辑-->
                                <!--                                </el-button>-->
                                <!--                                <el-button type="warning" icon="el-icon-delete">删除-->
                                <!--                                </el-button>-->
                                <el-button type="primary" icon="el-icon-edit"
                                           @click="addSupplier(props.row.name)">供给
                                </el-button>
                                <el-button type="warning" icon="el-icon-delete"
                                           @click="addConsumer(props.row.name)">接受
                                </el-button>
                            </el-button-group>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="el-pagination">

                    <el-pagination layout="total, prev, pager, next, jumper"
                                   :total="totalScores" :current-page="searchForm.pageNum"
                                   :page-size="searchForm.pageSize"
                                   @current-change="queryStudentScores">

                    </el-pagination>
                </div>

            </el-col>

        </el-row>
    </div>
</template>

<script>

    export default {

        name: "studentScoreBrowser",
        components: {
            // New,Old,
        },
        props: {
            sampleP: {
                type: Number,
                default: 0
            },
        },
        data() {
            return {
                sampleD: 'value',
                addForm: 'addFrom',
                /*
                * {
                "classScore": 70,
                "code": "223344",
                "name": "赵柳",
                "onlineScore": 78.5,
                "scoreId": 0
                }*/
                studentScore: {
                    scoreId: 0,
                    name: '赵柳',
                    code: '334455',
                    onlineScore: 60,
                    classScore: 80,
                },
                rules: {
                    name: [
                        {required: true, message: '请输入名字', trigger: 'blur'},
                    ],
                    // age: [
                    //     {required: true, message: '请选择年龄', trigger: 'blur'},
                    // ],
                },


                /*
                * {
                "pageNum": 2,
                "pageSize": 6,
                "queryCondition": {
                "code": "",
                "maxOnline": 80,
                "minOnline": 60,
                "similarName": ""
                }
                */
                searchForm: {

                    pageNum: 1,
                    pageSize: 6,
                    queryCondition: {
                        code: "",
                        maxOnline: null,
                        minOnline: 0,
                        similarName: ""

                    }
                },
                totalScores: 0,
                studentScores: [
                    {
                        scoreId: 110,
                        name: '赵柳一',
                        code: '3344552',
                        onlineScore: 50.8,
                        classScore: 80,
                    },
                    {
                        scoreId: 120,
                        name: '赵柳二',
                        code: '3344551',
                        onlineScore: 40,
                        classScore: 80,
                    },
                ],
                dealBill: {
                    dealBillId: 0,
                    supplierName: "",
                    consumerName: "",
                    dealScore: 5,
                },
                dealForm: "dealForm",


            }
        },
        computed: {
            // sampleC() {
            //     return this.sampleD+'--';
            // }
        },
        created() {
        },
        mounted() {
            this.searchForm.pageNum = 1;
            this.queryStudentScores();
        },
        methods: {
            sampleM() {

            },

            add() {
                this.$notify.info({
                    title: '发送亲求：',
                    message: JSON.stringify(this.studentScore)
                });

                let url = "/studentScore/";
                this.$refs[this.addForm].validate((valid) => {
                    // this.$message.warning(JSON.stringify("hi" + this.user.username+this.user.password));
                    if (valid) {
                        this.$http({
                            method: 'put',
                            url: url,
                            data: this.studentScore,
                            // headers: {
                            //     'Content-Type': 'application/json'
                            // },
                        }).then(res => {

                            this.$message.warning("保存成功?；　" + JSON.stringify(res.data));
                            if (res.data) {
                                this.queryStudentScores()
                            }
                        }).catch(res => console.log(JSON.stringify(res)));
                    } else {
                        this.$message.warning(JSON.stringify("validate mistake"))
                    }
                });

            },
            update(id) {
                this.$message.warning("开发中。。。" + id)
            },
            tableMaleColumn(row, column, cell) {
                return cell ? "男" : "女"
            },
            queryStudentScores(pageNum) {
                if (pageNum) this.searchForm.pageNum = pageNum;
                this.$http({
                    method: 'post',
                    url: '/studentScore/query',
                    data: this.searchForm,
                }).then(res => {
                    this.totalScores = res.data.total;
                    this.studentScores = res.data.results;
                    //this.total = res.data.total;
                    //this.newsResults = res.data.results;
                }).catch(res => {
                    this.$message.warning(JSON.stringify(res.data))
                });

            },
            queryStudentScoresButton(){
                this.searchForm.pageNum = 1;
                this.queryStudentScores();
            },
            addSupplier(name) {
                this.$message.warning("add supplier。。。" + name);

                this.dealBill.supplierName = name;
            },
            addConsumer(name) {
                this.$message.warning("add addConsumer。。。" + name);

                this.dealBill.consumerName = name;
            },
            deal() {
                this.$http({
                    method: 'post',
                    url: '/studentScore/deal',
                    data: this.dealBill,
                }).then(res => {
                    this.$message.warning("交易成功?；　" + JSON.stringify(res.data));
                    this.queryStudentScores();
                    //this.total = res.data.total;
                    //this.newsResults = res.data.results;
                }).catch(res => {
                    this.$message.warning(JSON.stringify(res.data))
                });
            }

        },
        watch: {
            // sampleC(newValue, oldValue) {
            //
            // }
        },
    }
</script>

<style scoped>
    /*<style lang='scss' scoped>*/
    .studentScore {
        background-color: rgba(255, 68, 1, 0.72);
    }

    .addForm {
        background-color: gray;
        width: 80%;
        margin: 0 auto;
        border-radius: 10px;

    }

    .dealForm {
        background-color: gray;
        width: 80%;
        margin: 0 auto;
        border-radius: 10px;

    }

    .formItem {
        margin: 5px auto;
        padding: 10px;
    }

    .browserTable {
        background-color: #8f82b3;
        width: 95%;
        margin: 0 auto;
        border-radius: 10px;

    }
</style>